<template>
  <div class="project-app">
    <div id="particles-js"></div>

    <div class="header">
      <div class="logo">
        <i class="fas fa-download"></i>
      </div>
      <h1>网控室 静态知识库</h1>
      <p>来自于网页备份，支持按分类筛选和搜索</p>
    </div>

    <div class="main-container">
      <!-- 固定侧边栏分类 -->
      <div class="sidebar">
        <h3>项目分类</h3>
        <ul class="categories">
          <li v-for="category in categories" :key="category.description">
            <a
                :class="{ active: selectedCategory === category.id }"
                @click="selectCategory(category.id)"
            >
              {{ category.description }}
            </a>
          </li>
        </ul>
      </div>

      <!-- 主内容区 -->
      <div class="content">
        <!-- 搜索框 -->
        <div class="search-container">
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input
                v-model="searchTerm"
                placeholder="搜索项目名称..."
                type="text"
            >
          </div>
        </div>

        <!-- 卡片容器 -->
        <div class="cards-container">
          <div
              v-for="project in filteredProjects"
              :key="project.id"
              :data-category="project.category"
              :data-name="project.name"
              class="card"
          >
            <div class="card-header">
              <h2>{{ project.name }}</h2>
            </div>
            <div class="card-body">
              <p>{{ project.description }}</p>
              <a class="card-button" @click="handleOpenProject(project.link)">打开项目</a>
            </div>
          </div>

          <div v-if="filteredProjects.length === 0" class="no-results">
            <p>没有找到匹配的项目，请尝试其他搜索词或分类</p>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>镜像和索引由 HTTrack 网站复制工具生成</p>
      <p>&copy; 2025 网控室 及其他贡献者</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, computed, onMounted} from 'vue';
import {getAllStaticFilesByCategory, getAllStaticFilesCategory} from "@/api/staticFiles/staticFile1";
import {message} from "@/utils/ElmessasgeUtils";
import {staticFiles_nginx_port} from '@/config/common'

// 定义类型
interface Project {
  id: number;
  name: string;
  categoryId: number;
  category: string;
  description: string;
  link: string;
}

interface Category {
  id: number;
  name: string;
  description: string;
}

// 搜索关键词
const searchTerm = ref('');

// 当前选中的分类
const selectedCategory = ref(0);

function handleOpenProject(str: string) {
  window.open("http://" + location.hostname + ":" + staticFiles_nginx_port + "/" + str);
}

// 项目数据
const projects = ref<Project[]>([]);

// 分类列表
const categories = ref<Category[]>([]);


function updateStaticFileCategoryList() {
  getAllStaticFilesCategory().then((res: any) => {
    if (res.data.code == 200) {
      console.log(res.data.data);
      categories.value = res.data.data;
    } else {
      message("获取静态库分类列表失败", 'error')
    }
  })
}

function updateStaticFileList(categoryId: number) {
  getAllStaticFilesByCategory({id: categoryId}).then((res: any) => {
    if (res.data.code == 200) {
      console.log(res.data.data);
      projects.value = res.data.data;
    } else {
      message("获取静态库列表失败", 'error')
    }
  })
}


// 过滤后的项目列表
const filteredProjects = computed(() => {
  return projects.value.filter(project => {
    // 根据分类筛选
    const categoryMatch = selectedCategory.value == 0 || project.categoryId === selectedCategory.value;

    // 根据搜索词筛选
    const searchMatch = project.name.toLowerCase().includes(searchTerm.value.toLowerCase());

    return categoryMatch && searchMatch;
  });
});

// 选择分类
const selectCategory = (categoryId: number) => {
  selectedCategory.value = categoryId;
};

// 初始化粒子背景
const initParticles = () => {
  if (window.particlesJS) {
    particlesJS('particles-js', {
      particles: {
        number: {value: 80, density: {enable: true, value_area: 800}},
        color: {value: "#0ff"},
        shape: {type: "circle"},
        opacity: {value: 0.5, random: true},
        size: {value: 3, random: true},
        line_linked: {
          enable: true,
          distance: 150,
          color: "#0ff",
          opacity: 0.4,
          width: 1
        },
        move: {
          enable: true,
          speed: 2,
          direction: "none",
          random: true,
          straight: false,
          out_mode: "out",
          bounce: false
        }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          onhover: {enable: true, mode: "grab"},
          onclick: {enable: true, mode: "push"},
          resize: true
        }
      },
      retina_detect: true
    });
  }
};

// 组件挂载后初始化
onMounted(() => {
  initParticles();
  updateStaticFileCategoryList();
  updateStaticFileList(0);
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.project-app {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #fff;
  min-height: 100vh;
  padding: 20px;
  font-family: 'Exo 2', sans-serif;
  overflow-x: hidden;
}

/* 布局 */
.main-container {
  display: flex;
  width: 100%;
  max-width: 1600px;
  margin: 20px auto 0;
  gap: 25px;
}

/* 固定侧边栏 */
.sidebar {
  width: 250px;
  background: rgba(25, 25, 35, 0.9);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  height: fit-content;
  position: sticky;
  top: 20px;
  z-index: 100;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.sidebar h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #0ff;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
}

.categories {
  list-style: none;
}

.categories li {
  margin-bottom: 12px;
}

.categories a {
  display: block;
  padding: 12px 15px;
  color: #ccc;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.categories a:hover, .categories a.active {
  background: linear-gradient(45deg, #3498db, #2ecc71);
  color: white;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* 主内容区 */
.content {
  flex: 1;
}

/* 搜索框 */
.search-container {
  background: rgba(25, 25, 35, 0.8);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 5px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-box i {
  color: #0ff;
  font-size: 1.2rem;
  margin-right: 10px;
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  padding: 12px 0;
  font-size: 1.1rem;
  outline: none;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* 卡片容器 */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  background: rgba(25, 25, 35, 0.8);
  border-radius: 15px;
  overflow: hidden;
  width: calc(20% - 20px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(50px);
  animation: card-appear 0.6s forwards;
}

@keyframes card-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card.hidden {
  display: none;
}

.card:nth-child(1) {
  animation-delay: 0.1s;
}

.card:nth-child(2) {
  animation-delay: 0.2s;
}

.card:nth-child(3) {
  animation-delay: 0.3s;
}

.card:nth-child(4) {
  animation-delay: 0.4s;
}

.card:nth-child(5) {
  animation-delay: 0.5s;
}

.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 255, 255, 0.3);
}

.card-header {
  background: linear-gradient(45deg, #3498db, #2ecc71);
  color: white;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.card-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0)
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.card-header h2 {
  font-size: 1.4rem;
  margin: 0;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.card-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-body p {
  margin-bottom: 20px;
  line-height: 1.5;
  color: #ccc;
  flex-grow: 1;
  font-size: 0.95rem;
}

.card-button {
  display: block;
  text-align: center;
  background: linear-gradient(45deg, #2ecc71, #3498db);
  color: white;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-top: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.card-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
  z-index: -1;
}

.card-button:hover::before {
  left: 100%;
}

.card-button:hover {
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.6);
  transform: translateY(-2px);
}

/* 页眉 */
.header {
  text-align: center;
  margin: 20px 0 40px;
  color: white;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  font-size: 4rem;
  margin-bottom: 15px;
  color: #0ff;
  text-shadow: 0 0 15px #0ff;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    text-shadow: 0 0 15px #0ff;
  }
  50% {
    text-shadow: 0 0 25px #0ff, 0 0 35px #0ff;
  }
  100% {
    text-shadow: 0 0 15px #0ff;
  }
}

.header h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #0ff, #f0f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.header p {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 页脚 */
.footer {
  margin-top: 60px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 0.9rem;
  width: 100%;
  max-width: 1400px;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: auto;
  margin-right: auto;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .card {
    width: calc(25% - 20px);
  }
}

@media (max-width: 1100px) {
  .card {
    width: calc(33.333% - 20px);
  }
}

@media (max-width: 900px) {
  .main-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    top: 0;
  }

  .card {
    width: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .card {
    width: 100%;
  }

  .header h1 {
    font-size: 2.2rem;
  }

  .header p {
    font-size: 1rem;
  }
}

/* 无结果消息 */
.no-results {
  text-align: center;
  padding: 40px;
  color: #ccc;
  font-size: 1.2rem;
  width: 100%;
}

/* 粒子背景 */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* 滚动条样式 */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.3);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 255, 0.5);
}
</style>